<template>
  <div class="main_container">
    <MyHeader :style="{backgroundColor:bgColor,color}" title="购物车案例"></MyHeader>
    <MyGoods :goods="item" v-for="item in list" :key="item.id"></MyGoods>
    <MyFooter :list="list"></MyFooter>

  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'

export default {
  name: 'ShoppingApp',
  components:{
    MyHeader,
    MyFooter,
    MyGoods
  },
  data() {
    return {
      bgColor:'#1d7bff',
      color:'#fff',
      list:[]
    };
  },

  mounted() {
    
  },
  async created(){
    let res=await this.$http({url:'/api/cart'})
    // console.log(res);
    this.list=res.data.list
  },
  methods: {
    
  },
};
</script>

<style>
.main_container{
  margin: 40px 0 50px 0;
}

</style>